<template>
  <div class="container">
    <span>输入搜索</span>
    <el-input
        placeholder="输入订单编号......"
        v-model="input"
        clearable  @keyup.enter.native="searchFun" 
        >
        <!-- @change="searchFun" -->
        </el-input>
    
    <div class="block">
        <span class="demonstration">下单时间</span>
        <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期">
        </el-date-picker>
    
     <span>  --- </span>
    
    <el-date-picker
    v-model="value2"
    align="right"
    type="date"
    placeholder="选择日期"
    :picker-options="pickerOptions">
    </el-date-picker>
    </div>
    
    <el-button type="primary" @click="searchFun">查询</el-button>
    <el-button plain @click="resetfun">重置</el-button>
    <el-button type="primary" @click="batchdele">批量删除</el-button>
    <!-- <el-button @click="showDialogfun" type="primary">添加</el-button> -->
  </div>
</template>

<script>
export default {
   

     data() {
      return {
        input: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      }
      
    },
     methods: {
      //  批量删除
      batchdele(){
        this.$emit('parentbatch')
      },
        searchFun(){
            this.$emit('parentsearchFun',this.input)
            // this.$parent.searchVal=this.input
        },
        // searchDate(){
        //   this.$emit('parentsearchFun',this.value1)

        // },
        resetfun(){
           this.input=''
           this.$emit('parentsearchFun',this.input)

        }
    },
    

}
</script>

<style lang="less" scoped>
.container{
    display: flex;
    justify-content: left;
    text-align: center;
    padding: 18px 0 18px 30px;
    font-size: 16px;
    // background: #fff;
    span{
        margin-top: 6px;
        margin-right: 15px;
    }
   .el-input{
       width: 200px;
       margin-right: 20px;
   }
    .block{
        display: flex;
    }
}

</style>